<template>
  <div class="service-group">
    <v-switch
      :value="hide"
      @changeSwitch="changeSwitch"
    />
    <level v-if="!hide" />
    <pool />
    <tags :labels="labels" :current-label="currentLabel" @clickLabel="clickLabel" class="tag">
      <template v-if="current === 0">
        <ul class="group">
          <li
            class="item border-bottom-1px"
            v-for="(item, index) in groupList"
            :key="index"
            @click="$router.push(`/product/detail/${item.product_id}/${item.id}`)"
          >
            <div class="product" v-if="item.product">
              <div class="image" v-if="item.product.mainImage && item.product.mainImage.thumbnail_path">
                <img v-lazy="item.product.mainImage.thumbnail_path" />
              </div>
              <div class="desc">
                <p class="id">团ID: {{item.id}}</p>
                <p class="title">{{ item.product.title }}</p>
                <p class="price">￥{{ +item.product.price }}</p>
                <p class="status">
                  {{ +item.status | statusText }}
                </p>
                <p class="diff" v-if="+item.status === 1 && +quantity > 0">
                  还差<span>{{ diff(item) }}</span>人
                </p>
              </div>
            </div>
            <h1 class="total">参与的用户有:</h1>
            <ul class="user">
              <li
                v-for="(o, i) in item.fans"
                :key="i"
              >
                <div class="image" v-if="o.user">
                  <img v-lazy="o.user.avatar" />
                </div>
                <div class="nickname" v-if="o.user">{{ o.user.nickname }}</div>
                <div class="win" v-if="+o.win === 1">拼中</div>
              </li>
            </ul>
          </li>
        </ul>
        <pull-up
          :loading="loading"
          :busy="queryGroup.busy"
          @loadMore="loadMore" />
      </template>
      <template v-if="current === 1">
        <ul class="fans">
          <li
            class="item border-bottom-1px"
            v-for="(item, index) in fansList"
            :key="index"
            @click="$router.push(`/product/detail/${item.product_id}/${item.id}`)"
          >
            <div class="product" v-if="item.product">
              <div class="image" v-if="item.product.mainImage && item.product.mainImage.thumbnail_path">
                <img v-lazy="item.product.mainImage.thumbnail_path" />
              </div>
              <div class="desc">
                <p class="id">团ID: {{item.id}}</p>
                <p class="title">{{ item.product.title }}</p>
                <p class="price">￥{{ +item.product.price }}</p>
                <p class="status">
                  {{ +item.status | statusText }}
                </p>
                <p class="diff" v-if="+item.status === 1 && +quantity > 0">
                  还差<span>{{ diff(item) }}</span>人
                </p>
              </div>
            </div>
            <h1 class="total">参与的用户有:</h1>
            <ul class="user">
              <li
                v-for="(o, i) in item.fans"
                :key="i"
              >
                <div class="image" v-if="o.user">
                  <img v-lazy="o.user.avatar" />
                </div>
                <div class="nickname" v-if="o.user">{{ o.user.nickname }}</div>
                <div class="win" v-if="+o.win === 1">拼中</div>
              </li>
            </ul>
          </li>
        </ul>
        <pull-up
          :loading="loading"
          :busy="queryFans.busy"
          @loadMore="loadMore" />
      </template>
    </tags>
    <loading :show="loading" />
  </div>
</template>

<script>
import Tags from '../components/Tags'
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
import PullUp from '@/components/PullUp'
import Pool from './components/Pool'
import Level from './components/Level'
import S from './components/Hide'
import scroll from '@/util/scroll'
export default {
  name: 'ServiceGroup',
  components: {
    Tags,
    Loading,
    PullUp,
    Pool,
    Level,
    'v-switch': S
  },
  filters: {
    statusText(v) {
      let text = ''
      if (+v === 0) {
        text = '待支付'
      }
      if (+v === 1) {
        text = '正在拼团中'
      }
      if (+v === 2) {
        text = '已结束'
      }
      return text
    }
  },
  computed: {
    currentLabel() {
      return this.labels[this.current]
    }
  },
  data() {
    return {
      labels: [],
      current: 0,
      loading: false,
      queryGroup: {},
      queryFans: {},
      groupList: [],
      fansList: [],
      // group user total
      quantity: 0,
      // hide
      hide: true
    }
  },
  methods: {
    changeSwitch() {
      this.hide = !this.hide
      if (!this.hide) {
        scroll.toTop()
      }
    },
    diff(item) {
      // warn: fans is object or array
      const fans = Object.keys(item.fans)
      return Number.parseInt(+this.quantity - fans.length)
    },
    createTags () {
      const tags = []
      tags[0] = '我开的团'
      tags[1] = '我参与的团'
      this.labels = tags
    },
    clickLabel(index) {
      this.current = index
      this.getList()
    },
    init() {
      this.queryGroup = {
        page: 0,
        pageSize: 10,
        busy: false
      }
      this.queryFans = {
        page: 0,
        pageSize: 10,
        busy: false
      }
    },
    getList() {
      this.init()
      if (this.current === 0) {
        this.getGroup()
      } else if (this.current === 1) {
        this.getFans()
      }
    },
    loadMore() {
      setTimeout(() => {
        if (this.current === 0) {
          this.getGroup(true)
        }
        if (this.current === 1) {
          this.getFans(true)
        }
      }, 200)
    },
    getGroup(append = false) {
      if (this.queryGroup.busy === false) {
        this.queryGroup.page++
        this.loading = true
        this.queryGroup.busy = true
        api.My.groupList({ ...this.queryGroup }).then(response => {
          let { data } = response
          data = base64.parse(data)
          this.quantity = data.quantity
          if (data.list.length === 0) {
            this.queryGroup.busy = true
          } else {
            this.queryGroup.busy = false
            if (append) {
              this.groupList = this.groupList.concat(data.list)
            } else {
              this.groupList = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    },
    getFans(append = false) {
      if (this.queryFans.busy === false) {
        this.queryFans.page++
        this.loading = true
        this.queryFans.busy = true
        api.My.groupJoinList({ ...this.queryFans }).then(response => {
          let { data } = response
          data = base64.parse(data)
          this.quantity = data.quantity
          if (data.list.length === 0) {
            this.queryFans.busy = true
          } else {
            this.queryFans.busy = false
            if (append) {
              this.fansList = this.fansList.concat(data.list)
            } else {
              this.fansList = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    }
  },
  created () {
    this.current = Number.parseInt(this.$route.params.type || 0)
    this.createTags()
    this.getList()
  },
  deactivated () {
    this.queryGroup.busy = true
    this.queryFans.busy = true
  }
}
</script>

<style scoped lang="stylus">
.service-group
  background white
  padding-bottom 30px
  border-radius 10px
  .group, .fans
    margin-bottom 15px
    .item
      padding 10px 0
      .product
        display flex
        align-items center
        .image
          width 100px
          box-sizing border-box
          padding 10px
        .desc
          flex 1
          text-align left
          p
            line-height 22px
            &.title
              font-size 16px
            &.price
              color red
              font-weight 700
              font-size 16px
      .user
        padding 0 10px
        display flex
        flex-wrap wrap
        li
          //background red
          width 20%
          overflow hidden
          padding 0 5px 15px 5px
          box-sizing border-box
          position relative
          .image
            box-sizing border-box
            padding 10px
            img
              border-radius 50%
          .win
            position absolute
            color white
            top 10px
            right 5px
            padding 2.5px 5px
            border-radius 2.5px
            background $main_color
            opacity 0.9
      .total
        height 35px
        line-height 35px
        text-align left
        margin-top 10px
        font-weight 700
</style>
